<template>
	<div>
		<view v-if="recommends">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="recommend" v-for="item in recommends">
					<image src="../imgs/add.png"></image>
					<button>{{item.name}}</button>
					<view>{{item.content}}</view>
					<button>+关注</button>
				</view>
			</scroll-view>
		</view>
	</div>
</template>

<script>
	var recommends = getApp().globalData.recommends;

	
	export default{
		name:'follow',
		components:{
			
		},
		data(){
			return{
				recommends:recommends
			}
		}
	}
</script>

<style>
.recommend{
	width: min-content;
	display: inline-block;
	margin: 10px;
}
.recommend image{
	width: 20vw;
	height: 20vw;
	display: block;
	margin: 0 auto;
}
.recommend button{
	background-color: transparent;
	display: block;
	margin: 5px auto;
	font-size: 4vw;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
}
.recommend button::after{
	border: none;
}
.recommend view{
	display: block;
	margin: 0 auto;
	text-align: center;
	text-overflow: ellipsis;
	width: 25vw;
	overflow: hidden;
}
</style>